<!--
 * @创建文件时间: 2021-06-01 22:41:21
 * @Auther: 猿小天
 * @最后修改人: 猿小天
 * @最后修改时间: 2021-08-12 00:06:38
 * 联系Qq:1638245306
 * @文件介绍:
-->
<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <!--    <template slot="header">测试页面1</template>-->
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @createPermission="createPermission"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button
            size="small"
            v-permission="'Create'"
            type="primary"
            @click="addRow"
          ><i class="el-icon-plus"/> 新增
          </el-button
          >
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
      <template slot="FormFooterSlot">
        <el-button v-if="![0, 4].includes(active)" @click="last">上一步</el-button>
        <el-button type="primary" :loading.sync="loading" @click="next">{{ buttonText }}</el-button>
      </template>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import {crudOptions} from './crud'
import {d2CrudPlus} from 'd2-crud-plus'
import MenuDesigner from "@/views/system/menu/components/menu-designer";
import {mapState} from "vuex";
import {refreshRoute} from "@/router";

export default {
  name: 'menus',
  components: {MenuDesigner},
  mixins: [d2CrudPlus.crud],
  computed: {
    ...mapState('superstore/menudesigner', [
      'buttonText', 'active'
    ])
  },
  data() {
    return {loading: false}
  },
  methods: {
    next() {
      if (this.active === 0) {
        this.$refs.d2Crud.$refs.designer.$refs.form.validate((valid) => {
          if (!valid) {
            return false
          }
          this.$store.commit('superstore/menudesigner/next')
        })
      } else if (this.active === 1) {
        if (JSON.parse(window.localStorage.getItem('widget__list__backup')).length <= 0) {
          this.$message.error(this.$t('menudesigner.designer.error'));
          return false;
        }
        this.$store.commit('superstore/menudesigner/next')
      } else if (this.active === 2) {
        const setting = this.$refs.d2Crud.$refs.designer.$refs.setting
        this.loading =  true
        setting.$refs.setting_form.validate((valid) => {
          if (!valid) {
            return false
          }
          const designer = this.$refs.d2Crud.$refs.designer
          const formData = designer.formData;
          formData['form_design'] = {
            'widgetList': JSON.parse(window.localStorage.getItem('widget__list__backup')),
            'formConfig': JSON.parse(window.localStorage.getItem('form__config__backup'))
          }
          formData['column_map'] = setting.columnMap;
          this.save(designer.formMode, formData)
        })
      } else if (this.active === 4) {
        this.$refs.d2Crud.$refs.designer.$refs.form.validate((valid) => {
          if (!valid) {
            return false
          }
          this.loading =  true
          const designer = this.$refs.d2Crud.$refs.designer
          const formData = designer.formData;
          this.save(designer.formMode, formData)
        })
      }
    },
    last() {
      this.$store.commit('superstore/menudesigner/last')
    },
    save(formMode, formData) {
      if (formMode === 'edit') {
        this.updateRequest(formData).then(() => {
          this.loading =  false
          this.$refs.d2Crud.handleCloseDialog()
          this.$message.success(this.$t('saveSuccessfully'))
          this.doRefresh()

          refreshRoute()
        }).catch(() => {
          this.loading = false
        })
      } else if (formMode === 'add') {
        this.addRequest(formData).then(() => {
          this.loading =  false
          this.$refs.d2Crud.handleCloseDialog()
          this.$message.success(this.$t('saveSuccessfully'))
          this.doRefresh()
          refreshRoute()
        }).catch(() => {
          this.loading = false
        })
      }
    },
    /**
     * 删除成功后触发
     * @param row
     */
    delAfter (row) {
      this.doAfterRowChange(row)
      refreshRoute()
    },
    getCrudOptions() {
      return crudOptions(this)
    },
    pageRequest(query) {
      return api.GetList(query)
    },
    addRequest(row) {
      return api.createObj(row)
    },
    updateRequest(row) {
      return api.UpdateObj(row)
    },
    delRequest(row) {
      return api.DelObj(row.id)
    },
    // 授权
    createPermission(scope) {
      this.$router.push({
        name: 'menuButton',
        params: {id: scope.row.id},
        query: {name: scope.row.name}
      })
    },
    // 返回views目录下所有vue文件路径
    searchFiles() {
      const files = require.context('@/views', true, /\.vue$/)
      const result = []
      files.keys().forEach((key) => {
        result.push({
          label: key.replace(/(\.\/|\.vue)/g, ''),
          value: key.replace(/(\.\/|\.vue)/g, '')
        })
      })
      return result
    },
    doDialogOpen(context) {
      // d2CrudPlus.util.dict.clear()
      this.$store.commit('superstore/menudesigner/clear')

    },

    doDialogOpened() {
      // if(this.$refs.d2Crud.$refs.designer) {
      //   const designer = this.$refs.d2Crud.$refs.designer.$refs
      //   // designer.form.clearValidate()
      // }
    },
    doFormDataChange({key, value, form}) {

    },
    // // doDialogCancel(done) {
    // //   console.log(this.$refs.d2Crud.$refs.designer.$refs)
    //   const designer = this.$refs.d2Crud.$refs.designer.$refs
    //   designer.form.clearValidate()
    // //   // designer.form_designer.designer.clearDesigner(true)
    // //   done()
    // // }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
